<!--
<template>
  &lt;!&ndash; 存放 HTML 代码 &ndash;&gt;
  <div class="app">
    <h1>你好啊！</h1>
    <Person/>
  </div>
</template>


<style>
/* 存放 CSS 代码 */
.app {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>

<script lang="ts">
// 存放 JS/TS 代码
// 通过 lang 属性指定为 ts 后，默认支持 ts 代码
import Person from "./components/Person.vue"
export default {
  name: 'App', // 组件名
  components: {
    Person // 注册组件
  }
}
</script>
-->

<!--计算属性-->

<!--<template>-->
<!--  <div>-->
<!--&lt;!&ndash; 在value前，加上 : 代表可以将 value 里面的值填充到 输入框内   &ndash;&gt;-->
<!--&lt;!&ndash; 如果要想双向绑定，即修改输入框内的值，可以影响到对应变量；反之，也可以影响    &ndash;&gt;-->
<!--&lt;!&ndash; 实现双向绑定的话，得将 ":"  改为 "v-model"  &ndash;&gt;-->
<!--    <p>姓: <input type="text" v-model="firstName"></p>-->
<!--    <p>名: <input type="text" v-model="lastName"></p>-->
<!--    <p>全名: {{fullName}}</p>-->
<!--&lt;!&ndash;    <p>全名: {{firstName}}-{{lastName}}</p>&ndash;&gt;-->
<!--    <button @click="changeFullName">修改全名</button>-->
<!--  </div>-->
<!--</template>-->

<!--<style scoped>-->

<!--</style>-->

<!--<script setup lang="ts">-->
<!--import {computed, ref} from "vue";-->

<!--let firstName = ref("zhang");-->
<!--let lastName = ref("san");-->

<!--// 计算属性-->
<!--// 下面这种方式只能获取到原来的属性值，而不能直接修改属性值-->
<!--// let fullName = computed(()=>{-->
<!--//   // return firstName.value + "-" + lastName.value;-->
<!--//   return firstName.value.slice(0, 1).toUpperCase()-->
<!--//   + firstName.value.slice(1) + "-" + lastName.value;-->
<!--// })-->

<!--let fullName = computed({-->
<!--  // 获取属性-->
<!--  get(){-->
<!--    return firstName.value + lastName.value;-->
<!--  },-->
<!--  // 修改属性-->
<!--  set(val){ // val是传过来的参数-->
<!--    console.log(val)-->
<!--    firstName.value = 'li'-->
<!--    lastName.value = 'si'-->
<!--  }-->
<!--})-->

<!--function changeFullName() {-->
<!--  fullName.value = "lisi"-->
<!--}-->
<!--</script>-->


<!--watch 监视-->
<template>
<!--  <div>-->
<!--    <p>显示数据: {{num}}</p>-->
<!--    <button @click="changeNum">点我+1</button>-->
<!--  </div>-->

  <div>
    <p>年龄: {{person.name}}</p>
    <p>年龄: {{person.age}}</p>
    <button @click="changeName">修改姓名</button><br>
    <button @click="changeAge">修改年龄</button><br>
    <button @click="changePerson">修改整个人的信息</button>
  </div>
</template>

<style scoped>

</style>

<script setup lang="ts">
import {ref, watch} from "vue";
// // 数据
// let num = ref(0)
// // 方法
// function changeNum() {
//   num.value += 1
// }
// 监视
// 情况一：监视【ref】定义的【基本类型】数据

// 第一个参数是 监视的值，第二个参数是 回调函数
// 回调函数有两个参数：newValue-新值，oldValue-旧值
// 当num的值发生了变化之后，就会调用回调函数
// const stopWatch = watch(num, (newValue, oldValue)=>{
//   console.log(newValue, oldValue)
//   // 当newValue的值大于等于10，就停止监视
//   if (newValue >= 10) {
//     stopWatch()
//   }
// })

// 情况二：监视【ref】定义的【对象类型】数据
let person = ref({
  name: '张三',
  age: 18
})

function changeName() {
  person.value.name += '~'
}

function changeAge() {
  person.value.age += 1
}

function changePerson() {
  person.value = {
    name: "lisi",
    age: 20
  }
}

// 监视 person 就是监视 person.value 整个值
// 只有这个值发生变化时，才会调用回调函数
// 如果我们想要监视对象内部的属性值的话，可以开启深度监视
// 通过第三个参数来开启
watch(person, (newValue, oldValue)=>{
  console.log(newValue, oldValue)
},{deep: true}) // 第三个参数为配置参数
</script>
